/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from 'react';
import { Card, Form } from 'antd';
import ProForm, { ProFormText } from '@ant-design/pro-form';

const LoginSearchForm: React.FC<any> = (props) => {
  const { onSearch, onReset } = props;
  const [form] = Form.useForm();

  return (
    <>
      <Card style={{ marginBottom: 20 }}>
        <ProForm
          layout='inline'
          form={form}
          submitter={{
            searchConfig: {
              submitText: '查询',
            },
          }}
          onFinish={async (values) => {
            console.log('onFinish', values);
            onSearch(values);
          }}
          onReset={onReset}
          style={{
            alignItems: 'baseline',
          }}
        >
          <ProFormText
            name={'phone'}
            placeholder={'驿站手机号'}
            rules={[
              {
                required: true,
                message: `手机号不能为空`,
              },
              {
                pattern: /^1[0-9]{10}/,
                message: `请输入正确的手机号`,
              },
            ]}
          />
        </ProForm>
      </Card>
    </>
  );
};

export default LoginSearchForm;
